<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体阴影</title>
		<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
		<style type="text/css">
			.h2Font{
				text-align: center;
				font:bold 50px/100px "微软雅黑";
				/**
				 * text-shadow 属性向文本设置阴影。
				 * 语法：
				 *	text-shadow: h-shadow v-shadow blur color;
				 *	h-shadow 必需。水平阴影的位置。允许负值。 
				 *	v-shadow 必需。垂直阴影的位置。允许负值。  
				 *	blur 可选。模糊的距离。  
				 *	color 可选。阴影的颜色。
				 *
				 *	可以添加多个阴影，多个阴影用“,”隔开，第一个阴影显示在最上层
				 */
				text-shadow: gray 10px 10px 10px,blue 15px 15px 15px;
			}
			.fuDiao{
				text-align: center;
				color: white;
				font:bold 50px/100px "微软雅黑";
				text-shadow: black 1px 1px 1px;
			}
			.txtBlur{
				text-align: center;
				color: black;
				font:bold 50px/100px "微软雅黑";
				/* 动画执行1s */
				transition: 1s;
			}
			.txtBlur:hover{
				color: rgba(0,0,0,0);
				text-shadow: transparent 0px 100px;
			}
			.txtBorder{
				text-align: center;
				color: antiquewhite;
				font:bold 50px/100px "微软雅黑";
				/* 文字描边，不算是css3的内容，只有webkit内核才能用 */
				-webkit-text-stroke: 4px #8A2BE2;
			}
			/**
			 * direction,控制文字方向
			 * ltr 默认。文本方向从左到右。 
			 * rtl 文本方向从右到左。 
			 * 但是一定要配合unicode-bidi
			 */
			.content{
				width: 200px;
				border: 1px solid #008000;
				direction: rtl;
				unicode-bidi: bidi-override;
			}
		</style>
	</head>
	<body>
		<h2 class="h2Font">字体阴影</h2>
		<h2 class="fuDiao">浮雕效果</h2>
		<h2 class="txtBlur">文字hover模糊效果</h2>
		<h2 class="txtBorder">文字描边效果（只有webkit内核(也就是手机端)才能用）</h2>
		<div class="content">
			文字方向
		</div>
	</body>
</html>
